<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      v-if="!isFromShare"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      id="nav-bar"
      title="商品详情"
      :custom-back="handleGotoHome"
    ></u-navbar>
    <u-navbar
      v-else
      back-icon-name="home"
      :background="{ background: '#fff' }"
      border-bottom
      id="nav-bar"
      title="商品详情"
      :custom-back="handleGotoHome"
    ></u-navbar>

    <!-- 轮播图 -->
    <view class="swiper-wrap">
      <u-swiper
        :list="swiperList"
        mode="number"
        indicator-pos="bottomRight"
        :autoplay="false"
        :circular="true"
        :height="750"
        @click="handleSwiperClick"
      ></u-swiper>
    </view>

    <view class="goods-wrap">
      <view class="goods-info">
        <view class="header">
          <view class="left">
            <text class="unit">¥</text>
            <text class="price"> {{ goodsData.salePrice || 0 }} </text>
            <text v-if="goodsData.originalPrice" class="original">
              ¥{{ goodsData.originalPrice }}
            </text>
          </view>
          <view v-if="goodsData.noneStockDelivery" class="right">库存999</view>
          <view v-else class="right">库存{{ goodsData.stock || 0 }}</view>
        </view>
        <view class="title">{{ goodsData.productName || '-' }} </view>
        <view class="subTitle">50张装贴纸(包邮)</view>
        <!-- <view v-if="goodsData.productTags" class="tags">
          <view
            v-for="(tag, tagIndex) in goodsData.productTags.split('│')"
            :key="tagIndex"
            class="tag"
          >
            <image
              src="../../static/images/goodsDetail-tagBg.png"
              mode="widthFix"
            />
            <text>{{ tag }}</text>
          </view>
        </view> -->
      </view>
      <!--
      <view class="goods-chooseBox">
        <view class="item" @click="handleShowInstructions">
          <text class="title">说明</text>
          <text class="content">100%正品·不支持7天无理由退款</text>
          <u-icon
            name="arrow-right"
            class="u-icon-wrap u-cell__right-icon-wrap"
          >
          </u-icon>
        </view>

        <view v-if="specList.length > 0" class="item" @click="show = true">
          <text class="title">规格</text>
          <text class="content">
            <template v-if="specLabel">{{ specLabel || '-' }}</template>
            <template v-else>请选择规格</template>
          </text>
          <u-icon
            name="arrow-right"
            class="u-icon-wrap u-cell__right-icon-wrap"
          >
          </u-icon>
        </view>

        <view class="item">
          <text class="title">物流</text>
          <text class="content"> 同城仓库极速配送 </text>
        </view>
      </view> -->
    </view>

    <view class="goods-imgIntro">
      <!-- <u-divider color="#000000" bg-color="#f7f7f7">商品详情</u-divider> -->
      <view class="title">
        <view class="dot"></view>
        <text>商品详情</text>
        <view class="dot"></view>
      </view>
      <view class="detail-text">
        为汇付天下特约商户提供安装服务，并获取相应的安装佣金。
        激活奖励:客户入网0~30天，累计交易满30000元，奖励服务商10元
      </view>
      <view class="imgBox">
        <image
          v-for="(item, index) in descImgs"
          :src="item"
          :key="index"
          mode="widthFix"
          lazy-load
        ></image>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <image src="/static/images/goodsDetail-contact.png" mode="widthFix" />
          <view class="text u-line-1">客服</view>
          <button class="consultation" open-type="contact"></button>
        </view>
        <view class="item car" @click="handleGotoCart">
          <u-badge
            class="car-num"
            :count="0"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <image src="/static/images/icon-cart.png" mode="widthFix" />
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right">
        <view class="addCart btn u-line-1" @click="handleAddToCart">
          加入购物车
        </view>
        <view class="buy btn u-line-1" @click="handleBuyNow()">立即购买</view>
      </view>
    </view>

    <!-- 商品参数选择 -->
    <u-popup v-model="show" mode="bottom" :closeable="true" border-radius="20">
      <view class="layer attr-content">
        <view class="a-t">
          <image
            v-if="swiperList && swiperList.length > 0"
            :src="swiperList[0]"
          ></image>
          <view class="right">
            <view class="title">汇来米收款贴纸</view>
            <view class="price">
              <text class="unit">¥</text>{{ specPrice * buyNum }}
            </view>

            <!-- <view class="selected"> 已选：{{ specLabel || '-' }} </view> -->
          </view>
        </view>
        <!-- <view class="attr-list">
          <text class="spec-header">规格</text>
          <view class="item-list">
            <text
              v-for="(item, index) in specList"
              :key="index"
              class="tit"
              :class="{ selected: item.selected }"
              @click="selectSpec(item.id)"
            >
              {{ item.skuName }}
            </text>
          </view>
        </view> -->
        <view class="attr-list">
          <text class="spec-header">购买方式</text>
          <view class="item-list">
            <text
              class="tit"
              :class="{ selected: item.selected }"
              @click="selectSpec(item.id)"
              >平台兑换</text
            >
            <text
              class="tit"
              :class="{ selected: item.selected }"
              @click="selectSpec(item.id)"
              >合伙人兑换</text
            >
          </view>
        </view>
        <view class="phone">
          <view class="phone-label">伙伴手机号</view>
          <u-input
            class="phone-input"
            input-align="right"
            v-model="phone"
            placeholder="伙伴手机号"
          />
        </view>
        <view class="num">
          <view class="left">购买数量<text>库存999</text></view>
          <u-number-box
            v-model="buyNum"
            :min="0"
            :max="goodsData.noneStockDelivery ? 999 : goodsData.stock"
            @change="changeBuyNum"
          >
          </u-number-box>
        </view>
        <view class="bottom-box">
          <view class="cancelBtn" @click="handleAddToCart"> 取消 </view>

          <view class="addToCartBtn" @click="handleAddToCart">
            加入购物车
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 购买说明 -->
    <u-popup
      v-model="showInstructions"
      mode="bottom"
      :closeable="true"
      border-radius="20"
    >
      <view class="instructions">
        <view class="instructions-title">购买说明</view>
        <view class="instructions-content">
          <view class="label">100%正品</view>
          <view class="detail">100%正品，全流程品质保障</view>
          <view class="label">不支持7天无理由退货</view>
          <view class="detail">该类目由于特殊性，不支持7天无理由退货。</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import service from '@/common/service.js';
import { showToast, showLoading } from '@/common/utils';

export default {
  data() {
    return {
      baseFileUrl: '',
      goodsData: {},
      swiperList: [],
      show: true,
      specSelected: [],
      specList: [],
      descImgs: [],
      buyNum: 1,
      specLabel: '',
      specCode: null,
      extSkus: [],
      specPrice: 0,
      isFromShare: false,
      myInfo: {},
      showInstructions: false,
      // addressInfo: {},
      invite: '',
      myInvite: '',
      specBackIntegral: 0,
      buyType: 0,
      code: '',
      isMiniApp: false,
      phone: '',
    };
  },
  onLoad(e) {
    //获取邀请人的邀请码并存入缓存
    if (e.scene) {
      uni.setStorageSync('invite', e.scene);
    }
    if (uni.getStorageSync('invite')) {
      this.invite = uni.getStorageSync('invite');
    }
    //获取商品ID
    this.id = Number(e.id);
    //获取用户的授权码，邀请时带出去
    this.myInvite = uni.getStorageSync('myInvite');

    if (e.from === 'share') {
      this.isFromShare = true;
    }
    // this.getData();
  },
  onShareAppMessage() {
    return {
      title: this.goodsData.productName,
      path: `/pages/goodsDetail/index?id=${this.id}&scene=${this.myInvite}&from=share`,
      imageUrl: this.swiperList[0],
      success(res) {
        showToast('分享成功');
      },
    };
  },
  onShareTimeline() {
    return {
      title: this.goodsData.productName,
      path: `/pages/goodsDetail/index?id=${this.id}&scene=${this.myInvite}&from=share`,
      imageUrl: this.swiperList[0],
      success(res) {
        showToast('分享成功');
      },
    };
  },
  methods: {
    handleGotoHome() {
      uni.switchTab({
        url: '/pages/home/index',
      });
    },
    handleGotoCart() {
      uni.switchTab({
        url: '/pages/cart/index',
      });
    },
    getData() {
      const that = this;
      const userCity = uni.getStorageSync('userCity');
      const param = {
        id: this.id,
        userCity: userCity,
      };
      showLoading();
      //   service.getGoodsDetail(
      //     param,
      //     function (res) {
      //       if (res && res.code == '0000') {
      //         const { data } = res;
      //         that.goodsData = data;
      //         let imgUrl = data.productImg ? data.productImg.split('|') : [];
      //         that.swiperList = imgUrl.map((item) => {
      //           return that.baseFileUrl + item;
      //         });
      //         let goodsIntroImgs = data.productDetailImg
      //           ? data.productDetailImg.split('|')
      //           : [];
      //         that.descImgs = goodsIntroImgs.map((item) => {
      //           return that.baseFileUrl + item;
      //         });

      //         that.getGoodsExtAttribute(that.goodsData.productDetailsInfos);
      //       } else {
      //         showToast(res.message);
      //       }
      //       hideLoading();
      //     },
      //     function (res) {
      //       hideLoading();
      //     }
      //   );
    },
    getGoodsExtAttribute(data) {
      const that = this;
      if (data && data.length > 0) {
        let newExtAttribe = [];
        let id = null;
        data.forEach((item) => {
          if (item.isShow) {
            if (item.salePrice == that.goodsData.salePrice) {
              id = item.id;
            }
            newExtAttribe.push(item);
          }
        });
        that.specList = newExtAttribe;
        if (id) {
          that.selectSpec(id);
        }
      }
    },
    handleShowInstructions() {
      this.showInstructions = true;
    },
    //选择规格
    selectSpec(id) {
      const that = this;
      let list = this.specList;
      list.forEach((item, index) => {
        if (item.id === id) {
          this.$set(list[index], 'selected', true);
          that.specCode = item.id.toString();
          that.specLabel = item.skuName + ' ';
          that.specPrice = item.salePrice;
        } else {
          this.$set(list[index], 'selected', false);
        }
      });
    },
    // 加入购物车
    handleAddToCart() {
      showLoading();
      let that = this;
      let cartGoods = uni.getStorageSync('cartGoods');
      if (!cartGoods) {
        cartGoods = [
          {
            id: 0,
            name: '自营店',
            checked: false,
            goods: [],
          },
        ];
      }

      let newCartGoods = [
        {
          id: 0,
          name: '自营店',
          checked: false,
          goods: [],
        },
      ];

      if (cartGoods[0].goods.length > 0) {
        let flag = false,
          goods = {};
        cartGoods[0].goods.forEach((item) => {
          if (item.specCode) {
            if (item.specCode == that.specCode) {
              flag = true;
              goods = item;
            } else {
              newCartGoods[0].goods.push(item);
            }
          } else {
            if (item.id == that.goodsData.id) {
              flag = true;
              goods = item;
            } else {
              newCartGoods[0].goods.push(item);
            }
          }
        });
        if (flag) {
          // 购物车已有此商品
          goods.show = false;
          goods.specCode = that.specCode;
          goods.specLabel = that.specLabel;
          goods.count = goods.count + that.buyNum;
          goods.buyType = that.goodsData.buyType;
          goods.backIntegral = that.specBackIntegral;
          goods.singlePrice = that.specPrice
            ? that.specPrice
            : that.goodsData.salePrice;
          goods.price = parseFloat(
            that.specPrice
              ? that.specPrice
              : that.goodsData.salePrice * goods.count
          ).toFixed(2);
          // goods.price = parseFloat(goods.singlePrice * goods.count).toFixed(2);
          newCartGoods[0].goods.push(goods);
        } else {
          // 购物车新增此商品
          goods = {
            id: that.goodsData.id,
            show: false,
            specCode: that.specCode,
            specLabel: that.specLabel,
            name: that.goodsData.productName,
            imgUr: that.baseFileUrl + that.goodsData.productImg.split(',')[0],
            singlePrice: that.specPrice
              ? that.specPrice
              : that.goodsData.salePrice,
            price: parseFloat(
              (that.specPrice ? that.specPrice : that.goodsData.salePrice) *
                that.buyNum
            ).toFixed(2),
            buyType: that.goodsData.buyType,
            backIntegral: that.specBackIntegral,
            count: that.buyNum,
            checked: false,
          };
          newCartGoods[0].goods.push(goods);
        }
      } else {
        let goods = {
          id: that.goodsData.id,
          show: false,
          specCode: that.specCode,
          specLabel: that.specLabel,
          name: that.goodsData.productName,
          imgUr: that.baseFileUrl + that.goodsData.productImg.split('|')[0],
          singlePrice: that.specPrice
            ? that.specPrice
            : that.goodsData.salePrice,
          price: parseFloat(
            (that.specPrice ? that.specPrice : that.goodsData.salePrice) *
              that.buyNum
          ).toFixed(2),
          buyType: that.goodsData.buyType,
          backIntegral: that.specBackIntegral,
          count: that.buyNum,
          checked: false,
        };
        newCartGoods[0].goods.push(goods);
      }

      uni.setStorageSync('cartGoods', newCartGoods);
      hideLoading();
      showToast('已添加至购物车');
    },
    // 立即购买前提示
    handleBuyPre() {
      if (this.specList.length > 0) {
        this.show = true;
      } else {
        this.handleBuyNow();
      }
    },
    // 立即购买
    handleBuyNow() {
      uni.navigateTo({
        url: '/pages/purchase/confirmApplication',
      });
      //     if (!this.myInfo.shopName) {
      //       uni.navigateTo({
      //         url: '/pages/my/myInfo',
      //       });
      // return;
      //     }
      // if (
      //   !this.goodsData.noneStockDelivery &&
      //   this.goodsData.stock < this.buyNum
      // ) {
      //   showToast('商品库存不足，无法购买');
      //   return;
      // }
      // uni.navigateTo({
      //   url:
      //     '/pages/order/confirmOrder?id=' +
      //     this.id +
      //     '&specCode=' +
      //     this.specCode +
      //     '&specLabel=' +
      //     this.specLabel +
      //     '&type=' +
      //     this.goodsData.type +
      //     '&buyNum=' +
      //     this.buyNum +
      //     '&specPrice=' +
      //     this.specPrice +
      //     '&specBackIntegral=' +
      //     this.specBackIntegral +
      //     '&buyType=' +
      //     this.goodsData.buyType,
      // });
    },
    changeBuyNum(value) {},
    callService() {
      uni.makePhoneCall({
        phoneNumber: '05962122958',
      });
    },
    handleSwiperClick(index) {
      uni.previewImage({
        loop: true,
        current: index,
        urls: this.swiperList,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: center;
  background-color: #f7f7f7;
}

.swiper-wrap {
  width: 100%;
}

.instructions {
  width: 100%;
  padding: 30rpx 30rpx 150rpx;
  background-color: #ffffff;
  .instructions-title {
    width: 100%;
    font-size: 36rpx;
    font-weight: bold;
    color: #222222;
    line-height: 1;
    text-align: center;
  }
  .instructions-content {
    margin-top: 26rpx;
    width: 100%;
    text-align: left;
    overflow: hidden;
    .label {
      margin-top: 30rpx;
      width: 100%;
      font-size: 26rpx;
      font-weight: bold;
      color: #222222;
      line-height: 1;
    }
    .detail {
      margin-top: 24rpx;
      width: 100%;
      height: 74rpx;
      padding: 0 25rpx;
      line-height: 74rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
      background: #f5f7f9;
      border-radius: 10rpx;
    }
  }
}

.goods-wrap {
  width: 100%;
  padding: 40rpx 30rpx 0;
  .goods-info {
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    width: 100%;
    .header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        .original {
          font-size: 25rpx;
          font-weight: 400;
          text-decoration: line-through;
          color: #666;
          line-height: 1;
        }
        .unit {
          margin-left: 14rpx;
          margin-bottom: 4rpx;
          font-size: 24rpx;
          line-height: 1;
          color: #e62e2e;
        }
        .price {
          font-size: 36rpx;
          line-height: 1;
          font-weight: bold;
          color: #e62e2e;
          font-family: DIN, sans-serif;
        }
        .decimal {
          font-size: 24rpx;
          line-height: 1;
          font-weight: bold;
          color: #e62e2e;
        }
        .integral {
          margin-left: 14rpx;
          font-size: 24rpx;
          line-height: 1;
          font-weight: normal;
          color: #a21e19;
        }
        // .orgPrice {
        //   margin-left: 20rpx;
        //   line-height: 1;
        //   font-size: 24rpx;
        //   font-weight: 400;
        //   text-decoration: line-through;
        //   color: #999999;
        // }
      }
      .right {
        line-height: 1;
        font-size: 22rpx;
        font-weight: 400;
        font-weight: normal;
        color: #999999;
      }
    }
    .title {
      margin-top: 20rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      width: 100%;
      height: auto;
      line-height: 1.5;
      text-align: left;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .subTitle {
      margin-top: 20rpx;
      width: 100%;
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 1.5;
      text-align: left;
    }
    .tags {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      margin-top: 18rpx;
      .tag {
        position: relative;
        width: 116rpx;
        height: 42rpx;
        margin-right: 12rpx;

        z-index: 1;
        image {
          width: 116rpx;
          height: 42rpx;
        }
        text {
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 116rpx;
          height: 42rpx;
          padding: 0 4rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #fff;
          line-height: 42rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .goods-chooseBox {
    margin-top: 30rpx;
    padding: 30rpx 24rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    width: 100%;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20rpx 0;
      .title {
        width: 60rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #222222;
        line-height: 1;
      }
      .content {
        flex: 1;
        padding-left: 30rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #000000;
        line-height: 1;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .selected-text {
          padding: 0 10rpx;
        }
      }
    }
    .u-cell__right-icon-wrap {
      color: #cccccc;
    }
  }
}

.goods-imgIntro {
  margin-top: 40rpx;
  padding: 0 0 160rpx;
  border-radius: 10rpx;
  background-color: transparent;
  width: 100%;
  .detail-text {
    margin-top: 20rpx;
    width: 100%;
    padding: 0 30rpx;
    font-family: PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 1.5;
    text-align: left;
  }
  .title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 32rpx;
    font-weight: bold;
    color: #222222;
    .dot {
      margin: 0 10rpx;
      width: 38rpx;
      height: 1rpx;
      background: #e5e5e5;
    }
  }
  .imgBox {
    margin-top: 30rpx;
    width: 100%;
    padding-bottom: 60rpx;
    image {
      width: 100%;
      height: auto;
    }
  }
}

.attr-content {
  width: 100%;
  padding: 30rpx 30rpx 68rpx;
  // border-bottom: env(safe-area-inset-bottom);
  .a-t {
    display: flex;
    flex-direction: row;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 16rpx;
    }
    .right {
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      .title {
        width: 100%;
        font-family: PingFang SC, sans-serif;
        font-weight: 800;
        font-size: 28rpx;
        color: #333333;
      }
      .price {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #e62e2e;

        .label {
          margin-right: 10rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #ffffff;
          padding: 6rpx 10rpx;
          background: linear-gradient(90deg, #ff6619, #ff2a00);
          border-radius: 6rpx;
        }

        .unit {
          font-size: 24rpx;
          font-weight: bold;
          color: #e62e2e;
          line-height: 1;
        }

        .integral {
          margin-left: 14rpx;
          font-size: 24rpx;
          font-weight: normal;
          color: #a21e19;
          line-height: 1;
        }

        .orgPrice {
          margin-left: 20rpx;
          font-size: 24rpx;
          font-weight: 400;
          text-decoration: line-through;
          color: #999999;
        }
      }
      .selected {
        margin-top: 20rpx;
        line-height: 1;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        text-align: left;
        .selected-text {
          padding: 0 10rpx;
          line-height: 1;
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          text-align: left;
        }
      }
    }
  }

  .attr-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 50rpx;

    .spec-header {
      font-size: 26rpx;
      font-weight: bold;
      color: #000000;
      line-height: 1;
      text-align: left;
    }
  }

  .item-list {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 0 0;
    text {
      margin-right: 30rpx;
      margin-bottom: 20rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 0 40rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999393;
      border-radius: 10rpx;
      background-color: #f7f7f7;
    }
    .selected {
      background: #b7926e;
      border-radius: 10rpx;
    }
  }

  .phone {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 106rpx;
    padding: 30rpx;
    background: #f7f7f7;
    border-radius: 20rpx;
    text-align: right;
    .phone-label {
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      text-align: left;
    }

    .phone-input {
      flex: 1;
      min-width: 0;
    }
  }

  .num {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 50rpx;
    .left {
      font-size: 26rpx;
      font-weight: bold;
      color: #000000;
      line-height: 1;
      text {
        margin-left: 20rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .bottom-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 100rpx;

    .cancelBtn {
      margin-right: 50rpx;
      flex: 1;
      min-width: 0;
      height: 74rpx;
      line-height: 74rpx;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      font-size: 26rpx;
      color: #999999;
      background: #f7f7f7;
      border-radius: 16rpx;
      cursor: pointer;
    }

    .addToCartBtn {
      flex: 1;
      position: relative;
      min-width: 0;
      height: 74rpx;
      font-family: PingFang SC, sans-serif;
      background: linear-gradient(90deg, #d9b189, #c5a27f);
      border-radius: 16rpx;
      line-height: 74rpx;
      font-size: 26rpx;
      font-weight: normal;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.navigation {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx 10rpx 68rpx;
  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20rpx;
    .item {
      position: relative;
      margin: 0 20rpx;
      image {
        width: 48rpx;
        height: 49rpx;
      }
      .shareBtn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 999;
        &::after {
          border: none;
        }
      }

      .consultation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 999;
        &::after {
          border: none;
        }
      }
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 30rpx;
    padding-right: 30rpx;
    .addCart {
      width: 230rpx;
      height: 74rpx;
      line-height: 74rpx;
      font-size: 26rpx;
      color: #ffffff;
      background: linear-gradient(90deg, #d9b189, #c5a27f);
      border-radius: 12rpx;
    }
    .buy {
      margin-left: 24rpx;
      width: 230rpx;
      height: 74rpx;
      line-height: 74rpx;
      font-size: 26rpx;
      color: #ffffff;
      background: linear-gradient(90deg, #332108, #201403);
      border-radius: 12rpx;
    }
  }
}
</style>
